<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>

    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layui/css/manyPhotoUpload.css" media="all">


    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <!--wangEditor 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/static/wangEditor/wangEditor.min.js"></script>
    <%--高德地图--%>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.9&key=eb653b21e311c3ab432fcf03d63d07c1&plugin=AMap.Autocomplete&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>表单集合演示</legend>
    </fieldset>
    <form class="layui-form" action="">
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">单行输入框</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">验证必填项</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">验证手机</label>--%>
                <%--<div class="layui-input-inline">--%>
                    <%--<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">验证邮箱</label>--%>
                <%--<div class="layui-input-inline">--%>
                    <%--<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">多规则验证</label>--%>
                <%--<div class="layui-input-inline">--%>
                    <%--<input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">验证日期</label>--%>
                <%--<div class="layui-input-inline">--%>
                    <%--<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">验证链接</label>--%>
                <%--<div class="layui-input-inline">--%>
                    <%--<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">验证身份证</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">自定义验证</label>--%>
            <%--<div class="layui-input-inline">--%>
                <%--<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">--%>
            <%--</div>--%>
            <%--<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">范围</label>--%>
                <%--<div class="layui-input-inline" style="width: 100px;">--%>
                    <%--<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
                <%--<div class="layui-form-mid">-</div>--%>
                <%--<div class="layui-input-inline" style="width: 100px;">--%>
                    <%--<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">单行选择框</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<select name="interest" lay-filter="aihao">--%>
                    <%--<option value=""></option>--%>
                    <%--<option value="0">写作</option>--%>
                    <%--<option value="1" selected="">阅读</option>--%>
                    <%--<option value="2">游戏</option>--%>
                    <%--<option value="3">音乐</option>--%>
                    <%--<option value="4">旅行</option>--%>
                <%--</select>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">分组选择框</label>--%>
                <%--<div class="layui-input-inline">--%>
                    <%--<select name="quiz">--%>
                        <%--<option value="">请选择问题</option>--%>
                        <%--<optgroup label="城市记忆">--%>
                            <%--<option value="你工作的第一个城市">你工作的第一个城市</option>--%>
                        <%--</optgroup>--%>
                        <%--<optgroup label="学生时代">--%>
                            <%--<option value="你的工号">你的工号</option>--%>
                            <%--<option value="你最喜欢的老师">你最喜欢的老师</option>--%>
                        <%--</optgroup>--%>
                    <%--</select>--%>
                <%--</div>--%>
            <%--</div>--%>
            <%--<div class="layui-inline">--%>
                <%--<label class="layui-form-label">搜索选择框</label>--%>
                <%--<div class="layui-input-inline">--%>
                    <%--<select name="modules" lay-verify="required" lay-search="">--%>
                        <%--<option value="">直接选择或搜索选择</option>--%>
                        <%--<option value="1">layer</option>--%>
                        <%--<option value="2">form</option>--%>
                        <%--<option value="3">layim</option>--%>
                    <%--</select>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">联动选择框</label>--%>
            <%--<div class="layui-input-inline">--%>
                <%--<select name="quiz1">--%>
                    <%--<option value="">请选择省</option>--%>
                    <%--<option value="浙江" selected="">浙江省</option>--%>
                    <%--<option value="你的工号">江西省</option>--%>
                    <%--<option value="你最喜欢的老师">福建省</option>--%>
                <%--</select>--%>
            <%--</div>--%>
            <%--<div class="layui-input-inline">--%>
                <%--<select name="quiz2">--%>
                    <%--<option value="">请选择市</option>--%>
                    <%--<option value="杭州">杭州</option>--%>
                    <%--<option value="宁波" disabled="">宁波</option>--%>
                    <%--<option value="温州">温州</option>--%>
                    <%--<option value="温州">台州</option>--%>
                    <%--<option value="温州">绍兴</option>--%>
                <%--</select>--%>
            <%--</div>--%>
            <%--<div class="layui-input-inline">--%>
                <%--<select name="quiz3">--%>
                    <%--<option value="">请选择县/区</option>--%>
                    <%--<option value="西湖区">西湖区</option>--%>
                    <%--<option value="余杭区">余杭区</option>--%>
                    <%--<option value="拱墅区">临安市</option>--%>
                <%--</select>--%>
            <%--</div>--%>
            <%--<div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">复选框</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="checkbox" name="like[write]" title="写作">--%>
                <%--<input type="checkbox" name="like[read]" title="阅读" checked="">--%>
                <%--<input type="checkbox" name="like[game]" title="游戏">--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">开关-默认关</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">开关-默认开</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">单选框</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<input type="radio" name="sex" value="男" title="男" checked="">--%>
                <%--<input type="radio" name="sex" value="女" title="女">--%>
                <%--<input type="radio" name="sex" value="禁" title="禁用" disabled="">--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class="layui-form-item layui-form-text">--%>
            <%--<label class="layui-form-label">普通文本域</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<textarea placeholder="请输入内容" class="layui-textarea"></textarea>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item layui-form-text">--%>
            <%--<label class="layui-form-label">富文本</label>--%>
            <%--<div class="layui-input-block">--%>
               <%--<div id="editor"></div>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="layui-form-item layui-form-text" style="height: 300px">--%>
            <%--<label class="layui-form-label">高德地图</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--&lt;%&ndash;地图大小&ndash;%&gt;--%>
                <%--<div id="container" style="height: 290px"></div>--%>
                <%--<div id="myPageTop">--%>
                    <%--<table>--%>
                        <%--<tr>--%>
                            <%--<td>--%>
                                <%--<label>按关键字搜索：</label>--%>
                            <%--</td>--%>
                            <%--<td class="column2">--%>
                                <%--<label>左击获取经纬度：</label>--%>
                            <%--</td>--%>
                        <%--</tr>--%>
                        <%--<tr>--%>
                            <%--<td>--%>
                                <%--<input type="text" id="tipinput"   autocomplete="off" onkeydown="if(event.keyCode==13)return false;" placeholder="请输入关键字进行搜索" >--%>
                            <%--</td>--%>
                            <%--<td class="column2">--%>
                                <%--<input type="text"  readonly="true" id="lnglat" name="lnglat" >--%>
                            <%--</td>--%>
                        <%--</tr>--%>
                    <%--</table>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--多图上传--%>
        <div class="layui-form-item layui-form-text" >
            <div class="layui-upload ">

                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="imgs">
                    </div>
                </blockquote>
                <div class="">
                    <button type="button" class="layui-btn layui-btn-normal" id="sele_imgs">选择文件</button>
                    <button type="button" class="layui-btn" id="upload_imgs" disabled>Upload</button>

                    <button type="button" class="layui-btn layui-btn-danger" id="dele_imgs">删除选中图片</button>
                </div>

            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">Submit</button>
                <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
            </div>
        </div>
    </form>
</body>

<script id="img_template" type="text/html">
    <div class="upload-img" filename="{{ d.index }}">
        <input type="checkbox" name="" lay-skin="primary">
        <img src="{{  d.result }}" alt="{{ d.name }}" class="layui-upload-img">
    </div>
</script>


<%--加载wangEditor编辑器--%>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#editor');
    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器
    editor.create();
</script>

<%--layui表单--%>
<script>
    layui.use(['form', 'layedit', 'laydate', 'jquery','upload', 'laytpl'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            , upload = layui.upload
            , laytpl = layui.laytpl
            ,$ = layui.jquery;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function(data){

            //判断没有有获取经纬度
            var lnglat=$("#lnglat").val();

            if (lnglat==''){
                layer.alert("请选择具体位置"+lnglat);
                return false;
            }

            $.ajax({
                url : '',
                type : 'post',
                dataType : 'json',
                data : data.field,
                success : function (data) {
                    if (data.code == 200){
                        layer.msg(data.msg,{icon: 1, time: 500},function (index) {
                            layer.close(index);
                            //刷新当前页数据
                            $(".layui-laypage-btn").click();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2, time: 1000});
                    }
                }
            })


            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        });



        //批量删除 单击事件
        $('#dele_imgs').click(function () {
            $('input:checked').each(function (index, value) {
                var filename=$(this).parent().attr("filename");
                delete imgFiles[filename];
                $(this).parent().remove()
            });
        });


        var imgFiles;

        //多图片上传
        var uploadInst = upload.render({
            elem: '#sele_imgs'  //开始
            , acceptMime: 'image/*'
            , url: '/uploadFiles/uploadOnlyImage'
            , auto: false
            , bindAction: '#upload_imgs'
            , multiple: true
            , size: 1024 * 12
            , choose: function (obj) {  //选择图片后事件
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                imgFiles = files;

                $('#upload_imgs').prop('disabled',false);

                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    var data = {
                        index: index,
                        name: file.name,
                        result: result
                    };

                    //将预览html 追加
                    laytpl(img_template.innerHTML).render(data, function (html) {
                        $('#imgs').append(html);
                    });

                    //绑定单击事件
                    $('#imgs div:last-child>img').click(function () {
                        var isChecked = $(this).siblings("input").prop("checked");
                        $(this).siblings("input").prop("checked", !isChecked);
                        return false;
                    });

                });
            }
            , before: function (obj) { //上传前回函数
                layer.load(); //上传loading
            }
            , done: function (res,index,upload) {    //上传完毕后事件

                layer.closeAll('loading'); //关闭loading
                //上传完毕

                $('#imgs').html("");//清空操作

                top.layer.msg("上传成功！");

                return delete imgFiles[index]; //删除文件队列已经上传成功的文件

            }
            , error: function (index, upload) {

                layer.closeAll('loading'); //关闭loading

                top.layer.msg("上传失败！");

            }
        });

    });
</script>

<%--
    高德地图
    点击获取的时候，填充搜索栏的地址，并记录mark点
--%>
<script type="text/javascript">
    var map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 18
        })

        //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();

        if (marker) {
            marker.setMap(null);
            marker = null;
        }
        addMarker(e.lnglat.getLng(),e.lnglat.getLat());
        //这边是数组
        var lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()];
        regeocoder(lnglatXY);
    });

    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });

    //注册监听，当选中某条记录时会触发
    AMap.event.addListener(auto, "select", select);
    function select(e) {
        var lng = e.poi.location.lng;
        var lat = e.poi.location.lat;
        console.log(e.poi.location.lng);
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
            addMarker(lng,lat);
        }
    }

    var marker;
    // 实例化点标记
    function addMarker(lng,lat) {
        marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [lng, lat]
        });
        marker.setMap(map);
    }

    //坐标-地址
    function regeocoder(lnglatXY) {  //逆地理编码
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });
    }

    function geocoder_CallBack(data) {
        var address = data.regeocode.formattedAddress; //返回地址描述
        document.getElementById("tipinput").value=address;
    }
</script>


</html>
